<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog ba-operate-dialog-detail"
        :close-on-click-modal="false"
        :model-value="order_id > 0"
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('订单详情') }}
            </div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="default-main ba-table-box">
                <!-- <el-alert class="ba-table-alert" :title="t('订单详情') + ' ID: ' + state.query.id" type="info" show-icon /> -->
                <div style="margin-bottom: 20px;">
                    <el-descriptions
                        direction="vertical"
                        :column="24"
                        size="default"
                        :border="true"
                    >
                        
                        <el-descriptions-item :label="t('客户名')" width="10%" align="center">{{ state.customer.corp_name_ko }}</el-descriptions-item>
                        <el-descriptions-item :label="t('订单类型')" width="10%" align="center">{{ t(state.order.order_type) }}({{ t(state.order.trade_type) }})</el-descriptions-item>
                        <el-descriptions-item :label="t('订货产品')" width="10%" align="center"></el-descriptions-item>
                        <el-descriptions-item :label="t('供货商')" width="10%" align="center">{{ state.supplier.corp_name_cn }}</el-descriptions-item>
                        <el-descriptions-item :label="t('备注')" width="40%" align="center">
                            <div>
                                <span ref="noteButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.note">{{ state.order.note }}</span>
                                <span ref="noteButtonRef" style="cursor: pointer; color: #999;width: 100%; height: 20px; display: block;" v-if="!state.order.note"></span>
                                <el-popover
                                    ref="notePopoverRef"
                                    :virtual-ref="noteButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    width="300"
                                    placement="bottom-start"
                                >
                                    <div>
                                        <el-input v-model="state.pop_note.value" type="textarea" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopNote" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateNote" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_note.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <el-alert class="ba-table-alert" :title="t('订单信息')" type="info" show-icon />

                <el-table :data="state.order2" style="width: 100%" border :highlight-current-row="false">
                    <el-table-column :label="t('订单')" align="center">
                        <template #default="scope">
                            <div style="" class="product-info">
                                <span v-if="state.order.order_images != ''" class="product-images-span" style="">
                                    <el-image
                                        style="max-width: 60px;border: 1px solid #eee;"
                                        :src="state.order.order_images"
                                        :zoom-rate="1.2"
                                        :preview-src-list="[state.order.order_images]"
                                        fit="cover" 
                                        :hide-on-click-modal="true"
                                        :preview-teleported="true"
                                    />
                                    <el-popconfirm :title="t('确定要删除这张图片吗') + '?'" @confirm="delOrderImage()">
                                        <template #reference>
                                            <Icon name="el-icon-Close" color="#bd362f" size="18" style="cursor: pointer; display: block; margin: 0 auto;" />
                                        </template>
                                    </el-popconfirm>
                                </span>
                            </div>
                            <FormItem 
                                v-if="state.order.order_images.length == 0" label="" type="image" 
                                v-model="state.order.order_images" style="margin-bottom: 0; margin-left: -17px;" 
                                :input-attr="{ hideSelectFile: true, onSuccess: orderImagesSuccess, showFileList: false }" 
                            />
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('总价') + '(USD)'" align="center">
                        <template #default="scope">
                            <div>
                                <span ref="amountUsdButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.amount_usd">{{ state.order.amount_usd }}</span>
                                <span ref="amountUsdButtonRef" style="cursor: pointer; color: #999;width: 100%; height: 20px; display: block;" v-if="!state.order.amount_usd"></span>
                                <el-popover
                                    ref="amountUsdPopoverRef"
                                    :virtual-ref="amountUsdButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_amount_usd.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopAmountUsd" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateAmountUsd" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_amount_usd.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('总价') + '(CNY)'" align="center">
                        <template #default="scope">
                            <div>
                                <span ref="amountButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.amount">{{ state.order.amount }}</span>
                                <span ref="amountButtonRef" style="cursor: pointer; color: #999;width: 100%; height: 20px; display: block;" v-if="!state.order.amount"></span>
                                <el-popover
                                    ref="amountPopoverRef"
                                    :virtual-ref="amountButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_amount.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopAmount" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateAmount" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_amount.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('货款')" align="center">
                        <template #default="scope">
                            <div>
                                <span ref="costButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.cost">{{ state.order.cost }}</span>
                                <span ref="costButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.cost"></span>
                                <el-popover
                                    ref="costPopoverRef"
                                    :virtual-ref="costButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_cost.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopCost" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateCost" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_cost.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('退税率') + '(%)'" align="center" v-if="state.order.order_type == '出口'">
                        <template #default="scope">
                            <div>
                                <span ref="drawbackRateButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.drawback_rate">{{ state.order.drawback_rate }}</span>
                                <span ref="drawbackRateButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.drawback_rate"></span>
                                <el-popover
                                    ref="drawbackRatePopoverRef"
                                    :virtual-ref="drawbackRateButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_drawback_rate.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopDrawbackRate" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateDrawbackRate" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_drawback_rate.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('退税额')" align="center" v-if="state.order.order_type == '出口'">
                        <template #default="scope">
                            <div>
                                <span>{{ state.order.drawback_amount }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('关税')" align="center" v-if="state.order.order_type == '进口'">
                        <template #default="scope">
                            <div>
                                <span ref="tariffButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.tariff">{{ state.order.tariff }}</span>
                                <span ref="tariffButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.tariff"></span>
                                <el-popover
                                    ref="tariffPopoverRef"
                                    :virtual-ref="tariffButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_tariff.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopTariff" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateTariff" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_tariff.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('增值税')" align="center" v-if="state.order.order_type == '进口'">
                        <template #default="scope">
                            <div>
                                <span ref="addedButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.added">{{ state.order.added }}</span>
                                <span ref="addedButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.added"></span>
                                <el-popover
                                    ref="addedPopoverRef"
                                    :virtual-ref="addedButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_added.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopAdded" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateAdded" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_added.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('物流费')" align="center">
                        <template #default="scope">
                            <div>
                                <span ref="logisticsAmountButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.logistics_amount">{{ state.order.logistics_amount }}</span>
                                <span ref="logisticsAmountButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.logistics_amount"></span>
                                <el-popover
                                    ref="logisticsAmountPopoverRef"
                                    :virtual-ref="logisticsAmountButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_logistics_amount.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopLogisticsAmount" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateLogisticsAmount" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_logistics_amount.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('利润')" align="center">
                        <template #default="scope">
                            <div>
                                <span ref="profitButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.profit">{{ state.order.profit }}</span>
                                <span ref="profitButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.profit"></span>
                                <el-popover
                                    ref="profitPopoverRef"
                                    :virtual-ref="profitButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_profit.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopProfit" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateProfit" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_profit.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    
                </el-table>
                

                <div style="width: 100%; height: 30px;"></div>
                
                <el-alert class="ba-table-alert" :title="t('佣金明细')" type="info" show-icon />

                <el-table :data="state.order2" style="width: 100%" border :highlight-current-row="false">
                    
                    <el-table-column :label="t('营销利润') + '(CNY)'" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span ref="marketProfitButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.market_profit">{{ state.order.market_profit }}</span>
                                <span ref="marketProfitButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.market_profit"></span>
                                <el-popover
                                    ref="marketProfitPopoverRef"
                                    :virtual-ref="marketProfitButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_market_profit.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopMarketProfit" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateMarketProfit" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_market_profit.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('销售税率')" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span ref="saleRateButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.sale_rate">{{ state.order.sale_rate }}%</span>
                                <span ref="saleRateButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.sale_rate"></span>
                                <el-popover
                                    ref="saleRatePopoverRef"
                                    :virtual-ref="saleRateButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_sale_rate.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopSaleRate" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateSaleRate" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_sale_rate.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('销售税金')" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span>{{ state.order.sale_tax }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('其他费用')" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span ref="otherCostButtonRef" style="cursor: pointer; width: 100%; display: block;" v-if="state.order.other_cost">{{ state.order.other_cost }}</span>
                                <span ref="otherCostButtonRef" style="cursor: pointer; color: #999; width: 100%; height: 20px; display: block;" v-if="!state.order.other_cost"></span>
                                <el-popover
                                    ref="otherCostPopoverRef"
                                    :virtual-ref="otherCostButtonRef"
                                    trigger="click"
                                    virtual-triggering
                                    :width="200"
                                >
                                    <div>
                                        <el-input v-model="state.pop_other_cost.value" type="text" clearable />
                                        <div style="margin-top: 10px; text-align: right;">
                                            <span @click="closePopOtherCost" class="btn">{{ t('关闭') }}</span>
                                            <span @click="updateOtherCost" class="btn btn-primary" style="margin-left: 10px;">
                                                <Icon v-if="state.pop_other_cost.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                                                {{ t('保存') }}
                                            </span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('毛利')" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span>{{ state.order.gross_profit }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('纯利')" align="center" width="150">
                        <template #default="scope">
                            <div>
                                <span>{{ state.order.net_profit }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('代理佣金')" align="center">
                        <template #default="scope">
                            <div>
                                <el-button blur style="padding-bottom: 7px; font-size: 13px;" @click="state.add.show = true;">{{ t('添加代理商') }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    
                    
                </el-table>

                

                <!-- 表格顶部菜单 -->
                <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
                <!-- <TableHeader :buttons="['add', 'delete', 'quickSearch', 'columnDisplay']" :quick-search-placeholder="t('搜索')"></TableHeader> -->

                <!-- 表格 -->
                <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
                <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
                
                <Table ref="tableRef" :pagination="false">
                    
                    <template #status>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column :label="t('操作')" align="center" width="150" class-name="business-name" height="200">
                            <template #default="scope">
                                <div v-if="scope.row.user_id > 0">
                                    <div>
                                        <div class="btn ml-0 mt-0" @click="add(scope)">{{ t('添加') }}</div>
                                    </div>
                                    
                                    <div :class="[scope.row.status.includes('1') ? 'btn btn-info ml-0 mt-5' : 'btn ml-0 mt-5']" @click="setStatus(scope.row.id, 1, scope.row)">{{ t('成交') }}</div>
                                    <div :class="[scope.row.status.includes('0') ? 'btn btn-info mt-5 ml-5' : 'btn mt-5 ml-5']" @click="setStatus(scope.row.id, 0, scope.row)">{{ t('终止') }}</div>
                                    <div class="btn ml-0 mt-5" @click="edit(scope)">{{ t('编辑') }}</div>
                                    <el-popconfirm :title="t('确定要删除这条数据吗') + '?'" @confirm="del(scope)">
                                        <template #reference>
                                            <div class="btn ml-5 mt-5">{{ t('删除') }}</div>
                                        </template>
                                    </el-popconfirm>
                                </div>
                                <div v-if="scope.row.user_id == 0">
                                    <div class="btn ml-0 mt-0" @click="add(scope)">{{ t('添加') }}</div>
                                    <div v-if="scope.row.user_id == 0" :class="[scope.row.status.includes('1') ? 'btn btn-info mt-0 ml-5' : 'btn mt-0 ml-5']" @click="setStatus(scope.row.id, 1, scope.row)">{{ t('完成') }}</div>
                                    <div class="btn ml-0 mt-5" @click="edit(scope)">{{ t('编辑') }}</div>
                                    <el-popconfirm :title="t('确定要删除这条数据吗')" @confirm="del(scope)">
                                        <template #reference>
                                            <div class="btn ml-5 mt-5">{{ t('删除') }}</div>
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #files>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column :label="t('附加文件')" align="center" min-width="120">
                            <template #default="scope">
                                <div style="height: 120px; overflow: auto;">
                                    <el-link :href="item.url" target="_blank" class="tag" style="margin-top: 5px;" v-for="(item, index) in scope.row.files" :key="index">{{ item.name }}</el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    
                    
                    <template #order_type>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column :label="t('订单状态')" align="center" width="100">
                            <template #default="scope">
                                <div style="">
                                    <el-dropdown>
                                        <span class="el-dropdown-link" style="cursor: pointer;">
                                            <el-text v-if="scope.row.status == 0" type="danger" style="font-size: 13px;">{{ t('准备下单') }}</el-text>
                                            <el-text v-if="scope.row.status == 1" type="primary" style="font-size: 13px;">{{ t('已确认') }}</el-text>
                                            <el-text v-if="scope.row.status == 2" type="success" style="font-size: 13px;">{{ t('已发货') }}</el-text>
                                        </span>
                                        <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="changeStatus(scope, 0)" :disabled="scope.row.status == 0"><span style="border-radius: 1.5px; background: #f56c6c; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('准备下单') }}</el-dropdown-item>
                                            <el-dropdown-item @click="changeStatus(scope, 1)" :disabled="scope.row.status == 1"><span style="border-radius: 1.5px; background: #409eff; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('已确认') }}</el-dropdown-item>
                                            <el-dropdown-item @click="changeStatus(scope, 2)" :disabled="scope.row.status == 2"><span style="border-radius: 1.5px; background: #67c23a; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('已发货') }}</el-dropdown-item>
                                        </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </Table>

                
                
                <PopupForm 
                    v-if="state.add.show" 
                    :show="state.add.show" 
                    :data="state.add"
                    @hideAdd="hideAdd" 
                    @getAgent="getAgent"
                />



            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive, markRaw } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { number_format } from '/@/utils/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import router from '/@/router/index'
import { useRoute } from 'vue-router'
import { saveOrderImagesApi, getAgentApi, delAgentApi, updateOtherCostApi, updateSaleRateApi, updateMarketProfitApi, updateProfitApi, updateLogisticsAmountApi, updateAddedApi, updateTariffApi, updateDrawbackAmountApi, updateDrawbackRateApi, updateCostApi, updateAmountUsdApi, changeStatusApi, detailApi, changeOrderTypeApi, updateAmountApi, updateTermApi, changeTradeTypeApi, updateTelApi, updateAddressApi, updateNoteApi } from '/@/api/most/customer/order'

import PayAmount from './render/pay_amount.vue';
import CommissionRatio from './render/commission_ratio.vue';
import CommissionRate from './render/commission_rate.vue';

import FormItem from '/@/components/formItem/index.vue'


defineOptions({
    name: 'customer_order/index',
})


const props = defineProps(['order_id'])
const emit = defineEmits(["hideDetail"])

// 保存订单图片
const orderImagesSuccess = () => {
    let data = {
        id: state.order.id,
        order_images: state.order.order_images
    }
    saveOrderImagesApi(data).then((e) => {

    })
}

const close = (done: () => void) => {
    emit("hideDetail")
    done()
}

const { t } = useI18n()
const tableRef = ref()

const popoverRef = ref()
const buttonRef = ref()

const termPopoverRef = ref()
const termButtonRef = ref()

const telPopoverRef = ref()
const telButtonRef = ref()

const addressPopoverRef = ref()
const addressButtonRef = ref()

const notePopoverRef = ref()
const noteButtonRef = ref()

const amountUsdPopoverRef = ref()
const amountUsdButtonRef = ref()

const amountPopoverRef = ref()
const amountButtonRef = ref()

const costPopoverRef = ref()
const costButtonRef = ref()

const drawbackRatePopoverRef = ref()
const drawbackRateButtonRef = ref()


const tariffPopoverRef = ref()
const tariffButtonRef = ref()

const addedPopoverRef = ref()
const addedButtonRef = ref()

const logisticsAmountPopoverRef = ref()
const logisticsAmountButtonRef = ref()

const profitPopoverRef = ref()
const profitButtonRef = ref()

// 其他费用
const otherCostPopoverRef = ref()
const otherCostButtonRef = ref()
// 销售税率
const saleRatePopoverRef = ref()
const saleRateButtonRef = ref()
// 营销利润
const marketProfitPopoverRef = ref()
const marketProfitButtonRef = ref()

const route = useRoute()

const state = reactive({
    order_id: props.order_id,
    add: {
        show: false,
        order_id: 0
    },
    query: {
        id: 0,
    },
    pop_amount: {
        loading: false,
        value: '',
    },
    pop_term: {
        loading: false,
        value: '',
    },
    pop_tel: {
        loading: false,
        value: '',
    },
    
    pop_note: {
        loading: false,
        value: '',
    },
    pop_amount_usd: {
        loading: false,
        value: '',
    },
    pop_cost: {
        loading: false,
        value: '',
    },
    pop_drawback_rate: {
        loading: false,
        value: '',
    },
    pop_drawback_amount: {
        loading: false,
        value: '',
    },
    pop_tariff: {
        loading: false,
        value: '',
    },
    pop_added: {
        loading: false,
        value: '',
    },
    pop_logistics_amount: {
        loading: false,
        value: '',
    },
    pop_profit: {
        loading: false,
        value: '',
    },
    pop_other_cost: { // 其它费用
        loading: false,
        value: '',
    },
    pop_sale_rate: { // 销售税率
        loading: false,
        value: '',
    },
    pop_market_profit: { // 营销利润
        loading: false,
        value: '',
    },
    order: {
        id: 0,
        order_type: '',
        out_trade_no: '',
        trade_type: '',
        note: '',
        amount: 0,
        amount_usd: null,
        create_time: '',
        tel: '',
        address: '',
        term: '',
        status: -1,
        order_images: ''
    },
    order2: [],
    customer: {
        corp_name_cn: '',
        corp_name_ko: '',
        manager: '',
    },
    supplier: {
        corp_name_cn: '',
    },
    agent: []
    
});

/**
 * 删除代理商
 */
const delAgent = (scope: anyObj) => {
    delAgentApi(scope.row).then((e) => {
        state.agent.forEach((item, index) => {
            if(item.id == scope.row.id){
                state.agent.splice(index, 1);
            }
        });
    })
}
/**
 * 关闭添加代理商窗口
 */
const hideAdd = () => {
    state.add.show = false;
}

// 货款
const closePopCost = () => {
    costPopoverRef.value.hide();
}
const updateCost = () => {
    let data = {
        id: state.order.id,
        cost: state.pop_cost.value
    }
    updateCostApi(data).then((e) => {
        closePopCost();
        state.order.cost = number_format(state.pop_cost.value);
        state.order.drawback_amount = e.data.drawback_amount;
        state.pop_cost.value = null;
    })
}

const closePopDrawbackRate = () => {
    drawbackRatePopoverRef.value.hide();
}
const updateDrawbackRate = () => {
    let data = {
        id: state.order.id,
        drawback_rate: state.pop_drawback_rate.value
    }
    updateDrawbackRateApi(data).then((e) => {
        closePopDrawbackRate();
        state.order.drawback_rate = state.pop_drawback_rate.value;
        state.order.drawback_amount = e.data.drawback_amount;
        state.pop_drawback_rate.value = null;
    })
}

// 关税
const closePopTariff = () => {
    tariffPopoverRef.value.hide();
}
const updateTariff = () => {
    let data = {
        id: state.order.id,
        tariff: state.pop_tariff.value
    }
    updateTariffApi(data).then((e) => {
        closePopTariff();
        state.order.tariff = number_format(state.pop_tariff.value);
        state.pop_tariff.value = null;
    })
}
// 其他费用
const closePopOtherCost = () => {
    otherCostPopoverRef.value.hide();
}
const updateOtherCost = () => {
    let data = {
        id: state.order.id,
        other_cost: state.pop_other_cost.value
    }
    updateOtherCostApi(data).then((e) => {
        closePopOtherCost();
        state.order.other_cost = state.pop_other_cost.value;
        state.pop_other_cost.value = null;
        reload()
    })
}
// 销售税率
const closePopSaleRate = () => {
    saleRatePopoverRef.value.hide();
}
const updateSaleRate = () => {
    let data = {
        id: state.order.id,
        sale_rate: state.pop_sale_rate.value
    }
    updateSaleRateApi(data).then((e) => {
        closePopSaleRate();
        state.order.sale_rate = state.pop_sale_rate.value;
        state.pop_sale_rate.value = null;
        reload();
    })
}
// 营销利润
const closePopMarketProfit = () => {
    marketProfitPopoverRef.value.hide();
}
const updateMarketProfit = () => {
    let data = {
        id: state.order.id,
        market_profit: state.pop_market_profit.value
    }
    updateMarketProfitApi(data).then((e) => {
        closePopMarketProfit();
        state.order.market_profit = state.pop_market_profit.value;
        state.pop_market_profit.value = null;
        reload();
    })
}
// 增值税
const closePopAdded = () => {
    addedPopoverRef.value.hide();
}
const updateAdded = () => {
    let data = {
        id: state.order.id,
        added: state.pop_added.value
    }
    updateAddedApi(data).then((e) => {
        closePopAdded();
        state.order.added = number_format(state.pop_added.value);
        state.pop_added.value = null;
    })
}

const closePopLogisticsAmount = () => {
    logisticsAmountPopoverRef.value.hide();
}
const updateLogisticsAmount = () => {
    let data = {
        id: state.order.id,
        logistics_amount: state.pop_logistics_amount.value
    }
    updateLogisticsAmountApi(data).then((e) => {
        closePopLogisticsAmount();
        state.order.logistics_amount = state.pop_logistics_amount.value;
        state.pop_logistics_amount.value = null;
    })
}

const closePopProfit = () => {
    profitPopoverRef.value.hide();
}
const updateProfit = () => {
    let data = {
        id: state.order.id,
        profit: state.pop_profit.value
    }
    updateProfitApi(data).then((e) => {
        closePopProfit();
        state.order.profit = state.pop_profit.value;
        state.pop_profit.value = null;
    })
}


//  订单总价
const closePopAmount = () => {
    amountPopoverRef.value.hide();
}
const updateAmount = () => {
    let data = {
        id: state.order.id,
        amount: state.pop_amount.value
    }
    updateAmountApi(data).then((e) => {
        closePopAmount();
        state.order.amount = number_format(state.pop_amount.value);
        state.pop_amount.value = null;
    })
}

const closePopTerm = () => {
    termPopoverRef.value.hide();
}
const updateTerm = () => {
    let data = {
        id: state.order.id,
        term: state.pop_term.value
    }
    updateTermApi(data).then((e) => {
        closePopTerm();
        state.order.term = state.pop_term.value;
        state.pop_term.value = null;
    })
}

const closePopTel = () => {
    telPopoverRef.value.hide();
}
const updateTel = () => {
    let data = {
        id: state.order.id,
        tel: state.pop_tel.value
    }
    updateTelApi(data).then((e) => {
        closePopTel();
        state.order.tel = state.pop_tel.value;
        state.pop_tel.value = null;
    })
}

// 总价(USD)
const closePopAmountUsd = () => {
    amountUsdPopoverRef.value.hide();
}
const updateAmountUsd = () => {
    let data = {
        id: state.order.id,
        amount_usd: state.pop_amount_usd.value
    }
    updateAmountUsdApi(data).then((e) => {
        closePopAmountUsd();
        state.order.amount_usd = number_format(state.pop_amount_usd.value);
        state.pop_amount_usd.value = null;
        if(e.data.amount_cny > -1){
            state.order.amount = number_format(e.data.amount_cny);
        }
    })
}



const closePopNote = () => {
    notePopoverRef.value.hide();
}
const updateNote = () => {
    let data = {
        id: state.order.id,
        note: state.pop_note.value
    }
    updateNoteApi(data).then((e) => {
        closePopNote();
        state.order.note = state.pop_note.value;
    })
}

const changeStatus = (scope: anyObj, status: number) => {
    changeStatusApi({id: state.order.id, status: status}).then((e) => {
        if(e.code == 1){
            state.order.status = status;
        }
    })
}

const changeOrderType = (type: string) => {
    changeOrderTypeApi({id: state.order.id, order_type: type}).then((e) => {
        if(e.code == 1){
            state.order.order_type = type;
        }
    })
}

const changeTradeType = (type: string) => {
    changeTradeTypeApi({id: state.order.id, trade_type: type}).then((e) => {
        if(e.code == 1){
            state.order.trade_type = type;
        }
    })
}


/**
 * 设置状态 
 */
const setStatus = (id: number, status: number, row: anyObj) => {
    let data = {id: id, status: status}
    setStatusApi(data).then((e) => {
        row.status = e.data.status;
        state.sub_status = e.data.sum_status
    })
}

const getAgent = () => {
    baTable.table.filter!.order_id = state.order_id;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}


const delOrderImage = () => {
    state.order.order_images = '';
    orderImagesSuccess();
}


// 自定义一个新的按钮
let newButton: OptButton[] = [
    {
        render: 'confirmButton',
        name: 'delete',
        title: '',
        text: t('删除'),
        type: 'info',
        class: 'btn btn ml-0 btn-xs',
        icon: '',
        popconfirm: {
            confirmButtonText: t('删除'),
            cancelButtonText: t('取消'),
            confirmButtonType: 'danger',
            title: t('确定要删除这条数据吗') + '?',
        }
    }
]


let optButtons = defaultOptButtons([])

// 新按钮合入到默认的按钮数组
optButtons = newButton.concat(optButtons)
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/system/customer.OrderAgent/'),
    {
        pk: 'id',
        column: [
            { label: t('代理商'), width: 150, prop: 'agent.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('纯利润'), width: 150, prop: 'profit', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { 
                label: t('佣金比率'), 
                prop: 'commission_ratio', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false, width: 150,
                render: 'customRender', 
                customRender: markRaw(CommissionRatio),
            },
            { label: t('佣金'), width: 150, prop: 'commission', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { 
                label: t('佣金税率'), 
                prop: 'commission_rate', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false, width: 150,
                render: 'customRender', 
                customRender: markRaw(CommissionRate),
            },
            { label: t('佣金税金'), width: 150, prop: 'commission_tax', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('应付佣金'), prop: 'to_commission', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('操作'), align: 'center', render: 'buttons', buttons: optButtons, operator: false, width: 100 },
        ],
        dblClickNotEditColumn: ['all'],
        defaultOrder: { prop: 'id', order: 'desc' },
    },
    {
        defaultItems: {  },
    },{
        
    },{
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看后
            state.sub_status = res.data.sum_status;
            // console.log(res.data);
            // console.log(state.sub_status)
        },
        postDel: ({ res }:{ res: ApiResponse }) => { // 删除后
            reload();
        },
    }
)

provide('baTable', baTable)





const reload = () => {
    detailApi({id: state.order_id}).then((e) => {
        state.order = e.data.order;
        state.order2 = [];
        state.order2.push(e.data.order)
        state.customer = e.data.customer
        state.agent = e.data.agent;
        state.supplier = e.data.supplier;
    })

    
    baTable.table.filter!.order_id = state.order_id;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}

provide('reload', reload)

onMounted(() => {
    baTable.table.ref = tableRef.value

    // state.query = route.query;
    state.add.order_id = state.order_id;
    detailApi({id: state.order_id}).then((e) => {
        state.order = e.data.order;
        if(!state.order.tel) state.order.tel = e.data.customer.contact;
        if(!state.order.address) state.order.address = e.data.customer.address;
        state.order2.push(e.data.order)
        state.customer = e.data.customer
        state.agent = e.data.agent;
        
        state.supplier = e.data.supplier;

        state.pop_note.value = e.data.order.note;
        

    })

    
    baTable.table.filter!.order_id = state.order_id;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">

:deep(.el-image){
    // width: 60px;
    // height: 60px;
    width: unset;
    height: unset;
    // max-height: 100px;
    // max-width: 80px;
    // max-height: 80px;
}
:deep(td.business-name > div.cell) {
    min-height: 80px;
    display:flex;
    justify-content:center; 
    align-items:center;
}
.tian{
    cursor: pointer;
}
.tian:hover{
    color: #409EFF;
}

:deep(.el-image > img){
    
}
:deep(.ba-data-table .btn){
    padding: 4px 14px;
}


:deep(.ba-data-table .margin-left-none:last-child){
    margin-bottom: 0px;
}
:deep(.table-operate-text){
    padding-left: 0;
}
:deep(.font-size-13){
    font-size: 13px;
}
:deep(.pay-type .el-radio){
    margin-right: 10px;
}
pre{
    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
}
:deep(.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
:deep(.quotation-scrollbar .el-scrollbar:first-child > .el-scrollbar__wrap){
    height: 100%;
}
:deep(.ml-0){
    margin-left: 0!important;
}
:deep(.mt-8){
    margin-top: 8px;
}
:deep(.ml--6){
    margin-left: -6px;
}
:deep(.ml-5){
    margin-left: 5px;
}
:deep(.mt-5){
    margin-top: 5px;
}

:deep(.el-table__row:hover td){
    background: unset!important;;
}

    // border-color: rgb(234, 234, 234);

:deep(.el-table th.el-table__cell){
    background: rgb(245, 245, 246);
    color: #000;
    border-color: rgb(234, 234, 234);
}



.product-info :deep(.el-input__wrapper:hover){
    box-shadow: 0 0 0 1px #c0c4cc inset;
}
.product-info :deep(.el-input__wrapper.is-focus){
    box-shadow: 0 0 0 1px #409eff inset;
}
.product-info :deep(.el-form-item__label){
    padding-right: 0;
}

:deep(.el-upload--picture-card){
    height: 50px;
    width: 50px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item){
    width: 50px;
    height: 50px;
}



.del-image{
    position: absolute; 
    top: 0px; 
    z-index: 9; 
    cursor: pointer;
    border: 1px solid #409eff;
    background: #409eff;
    color: #fff;
    width: 50px;
    text-align: center;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
}

.del-image:hover{
    background: #0354a4;
}



 

</style>
